<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="common/css/base.css">
    <link rel="stylesheet" href="common/css/reset.css"> 
   <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
   <link rel="stylesheet" href="node_modules/swiper/swiper-bundle.min.css">
   <script src="node_modules/swiper/swiper-bundle.min.js"></script>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
    <script>
        $('#header').load('./components/header/header.html',()=>{
            //页面在刷新时，即首次加载时 需要触发页面的加载操作
           changePage()
        })
        $('#footer').load('./components/footer/footer.html')

        
        addEventListener('hashchange',changePage) 

        function changePage(){
          //#p=note -> p=note 

        const h =location.hash.substring(1)
          //console.log({h})
          const param = new URLSearchParams(h)//转换成可操作的对象
          // 逻辑短路语法 从左到右第一个真值，适合为变量设置默认值
          // 即: 如果地址栏中不存在 #p=xxx则默认值为home
          const p = param.get('p') || 'home'//读取p的值
          //console.log({p})
          //把变量拼接成路径
          const path = `./pages/${p}/${p}.html`
          //console.log({path})
          $('#main').load(path,function(){
            //当页面加载完毕后，同比加载其对应的css和js
            $(this).append(`<link rel="stylesheet" href="pages/${p}/${p}.css">`)
       
            //问题：不能在 脚本中书写 /script>,会冲突
            //所以：必须要用DOM方式创建脚本
            const s =document.createElement('script')
            s.src =`pages/${p}/${p}.js`
            $(this).append(s)
          })
         }

    </script>
</body>
</html>